import styled from 'styled-components';
import React, { CSSProperties, useState } from 'react';
import {
    FooterToolbar,
    PageContainer,
    ProForm,
    ProFormDateRangePicker,
    ProFormDigit,
    ProFormRadio,
    ProFormSelect,
    ProFormText,
    ProFormTextArea,
    ProFormUploadButton,
    ProLayout,
} from '@ant-design/pro-components';

export interface AddDataSourceDialogProps {

}

export const AddDataSourceDialog: React.FC<AddDataSourceDialogProps> = (props) => {
    return (
        <Container>
            <ProForm
                request={async () => {
                    return {};
                }}
                onFinish={async (values) => {
                    //TODO 校验
                    console.log(values);
                }}
            >
                <ProFormText width="xl" fieldProps={{}} name="name" label="名称" />
                <ProFormText width="xl" fieldProps={{}} name="name1" label="名称" />
                <ProFormText width="xl" fieldProps={{}} name="name2" label="名称" />
            </ProForm>
        </Container>
    );
}


const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;